<script setup lang="ts">
import { ref, computed, inject } from "vue";
import leftCompWrapper from "../common/leftCompWrapper.vue";
import { getAssetsFile, convertStringToNumber } from "@visual/utils";
import { routerKey, useRouter } from "vue-router";

defineOptions({
  name: "rightList"
});
const isCollapsed = ref(false);
const isVisualEditer = inject("isVisualEditer", false);
const router = useRouter();
const props = withDefaults(
  defineProps<{
    propValue?: {
      contentList: Array<any>;
      title?: string;
      maxheight?: string;
      collapsed?: boolean;
      iconName?: string;
      size?: string;
      isNullHiden?: boolean;
      jumpArr?: Array<any>;
    };
    noWrapper?: boolean;
  }>(),
  {
    propValue: () => ({
      maxheight: "400px",
      contentList: [],
      title: "",
      collapsed: false,
      iconName: "alert",
      size: "normal",
      isNullHiden: true,
      jumpArr: []
    }),
    noWrapper: false
  }
);

const classes = (val: string) => {
  let types = ["正常", "异常"];
  return {
    "list-item-color-normal": val === "正常",
    "list-item-color-error": val === "异常",

    "list-item-color-defalut": !types.includes(val)
  };
};

const shouldShow = computed(() => {
  if ((!props.propValue.isNullHiden && props.propValue.isNullHiden !== undefined) || isVisualEditer) return true;
  if (Array.isArray(props?.propValue.contentList)) {
    return props?.propValue.contentList?.some(item => item.value !== null && item.value !== "" && item.value !== undefined);
  } else {
    return false;
  }
});

const computedWidth = computed(() => {
  if (props.propValue?.size) return "w-1/3";
  if (props.propValue.size === "small") return "w-1/3";
  return "w-1/2";
});
const jumpConcat = computed(() => {
  if (props.propValue.jumpArr) {
    return props?.propValue.contentList.concat(props.propValue.jumpArr);
  }
  return props?.propValue.contentList;
});
const viewClick = path => {
  if (path) {
    router.push({
      path: path
    });
  }
};
</script>

<template>
  <leftCompWrapper
    v-if="shouldShow"
    v-model="isCollapsed"
    :title="propValue.title"
    :icon-name="propValue.iconName"
    :has-collapsed="propValue.collapsed"
    :noWrapper="noWrapper"
  >
    <div v-if="isCollapsed || !propValue.collapsed" class="list-wrapper">
      <div v-for="(item, index) in jumpConcat" :key="item.tagNum ? item.tagNum : index" class="list-item-content" :class="computedWidth">
        <div v-if="item.icon" class="item-icon" :class="`item-icon-${item.icon}`">
          <img :class="`list-icon-${item.icon}`" :src="getAssetsFile(item.icon)" />
        </div>
        <div class="list-item-val-title">
          <div class="list-item-content-title">{{ item.title }}</div>
          <div class="list-item-content-val">
            <template v-if="!item.path">
              <span :class="classes(item.value)">{{ convertStringToNumber(item.value) }}</span>
              <span class="list-item-content-unit">{{ item.unit }}</span>
            </template>
            <template v-else>
              <span class="list-item-color-normal cursor-pointer" @click="viewClick(item.path)"> 查看 </span>
            </template>
          </div>
        </div>
      </div>
    </div>
  </leftCompWrapper>
</template>

<style lang="scss" scoped>
$listIcon: list-icon-;
$itemIcon: item-icon-;
$itemType: list-item-color-;
.#{$itemType}normal {
  color: #10b981;
}
.#{$itemType}warn {
  color: #f59e0b;
}
.#{$itemType}error {
  color: #ef4444;
}
.#{$itemType}offline {
  color: #909399;
}
.#{$itemType}default {
  color: #000;
}

.list-wrapper {
  display: flex;
  flex-flow: row wrap;
  row-gap: 8px;
  width: 100%;
  padding: 10px 0;

  .list-item-content {
    .list-item-val-title {
      font-size: 14px;
      color: #000;

      .list-item-content-val {
        margin-top: 4px;
        font-size: 22px;
        font-weight: 500;
        color: #000;

        .list-item-content-unit {
          font-size: 12px;
        }
      }
    }
  }

  .item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 4px;
  }
  .#{$listIcon}water,
  .#{$listIcon}totalwater {
    width: 16px;
    height: 20px;
  }
  .#{$listIcon}purewater {
    width: 20px;
    height: 18px;
  }
  .#{$listIcon}wastewater {
    width: 16px;
    height: 20px;
  }
  .#{$listIcon}bluelight {
    width: 16px;
    height: 20px;
  }
  .#{$listIcon}elector {
    width: 20px;
    height: 16px;
  }
  .#{$listIcon}bluetmp,
  .#{$listIcon}greentmp {
    width: 24px;
    height: 24px;
  }
  .#{$itemIcon}water {
    background-color: rgb(71 134 255 / 15%);
  }
  .#{$itemIcon}totalwater {
    background: rgb(255 178 102 / 15%);
  }
  .#{$itemIcon}purewater {
    background: rgb(73 176 245 / 15%);
  }
  .#{$itemIcon}wastewater {
    background: rgb(139 138 230 / 15%);
  }
  .#{$itemIcon}elector {
    background: rgb(139 138 230 / 15%);
  }
  .#{$itemIcon}bluelight {
    background: rgb(20 199 199 / 15%);
  }
  .#{$itemIcon}bluetmp {
    background: #ecf5ff;
  }
  .#{$itemIcon}greentmp {
    background: rgb(82 196 26 / 10%);
  }
}
</style>
